<!--
 * @Author: your name
 * @Date: 2022-01-19 23:06:11
 * @LastEditTime: 2022-01-20 01:03:02
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \json-serveg:\桌面2\VueStudy\vue-test4\vue-eqidemic\src\components\VueSwiper\VueSwiper.vue
-->
<template>
    <div>
        <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item,index) in banner" :key="index">
            <img :src="item.image" alt="" srcset="" width="100%">
        </swiper-slide>
        
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <!-- 轮播图片按钮 -->
    <ul class="list">
        <li v-for="(item,index) in banner" :key="index"
        :class="{ active: index == num }"
        @click="changeSwiper(index)"
        >{{item.title}}</li>
    </ul>


    </div>

</template>

<script>
import api from '../../api/index'
export default {
    name:'VueSwiper',
    data() {
        let that = this
      return {
          arr:[1,2,3,4,5],
          banner:[],//轮播图数据
          num: 0,
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination'
          },
          autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
            },
          loop : true,
            on: {
            //回调函数，swiper从一个slide过渡到另一个slide开始时执行
            slideChangeTransitionStart: function () {
                //轮播切换的时候获取下标activeIndex  然后修改num同步切换高亮
                //判断：
                if(this.activeIndex == that.arr.length+1){
                        that.num =0;
                }else{
                    that.num = this.activeIndex-1;
                }
                }
            },
        }
      } 
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    mounted() {
    //   console.log('Current Swiper instance object', this.swiper)
    //   this.swiper.slideTo(3, 1000, false)
    api.getSwiperBanner().then((res) => {
        // console.log('*******',res.data)
        this.banner = res.data.result
    })
    },
    methods: {
        changeSwiper(index){
                this.num = index
                this.swiper.slideTo(index+1, 1000, false)
        }
    },

}
</script>

<style scoped>
.list {
  display: flex;
}
.list  li {
    flex: 1;
    padding: 0.1rem;
    font-size: 0.24rem;
    line-height: 0.32rem;
    margin: 0.1rem;
    background: #eee;
    color: #666;
    text-align: center;
    display: flex;
    align-items: center;
  }
.list  .active {
    background: rgb(80, 116, 173);
    color: #fff;
  }
</style>